<template>
	<view>

		<!-- 页首 -->
		<zw-header :searchKeyword="keyword"></zw-header>

		<!-- 面包屑 -->
		<bread-crumb :pages="[{name: '搜索'}]"></bread-crumb>

		<!-- 类别栏 -->
		<filter-list name="类别" :list="categories" :activeIndex="categoryIndex" @change="categoryChange"></filter-list>
		<!-- 品牌栏 -->
		<filter-list name="品牌" :list="brands" :activeIndex="brandIndex" separator @change="brandChange"></filter-list>

		<!-- 主体内容 -->
		<view class="search-wrapper">
			<view class="wrap">
				<!-- 排序方式 -->
				<view class="sort-wrap">
					<block v-for="(item, index) in sortMode" :key="index">
						<view class="item" :class="{'active': sortIndex == index}" @click="sortChange(index)">
							<text class="name">{{item}}</text>
							<i class="icon i-up" :class="{'down': !priceUp}" v-if="index == 3"></i>
						</view>
					</block>
				</view>
				<!-- 商品列表 -->
				<view class="goods-wrap">
					<block v-for="(item, index) in goodses" :key="index">
						<navigator class="goods" :url="`/pages/goods/index?id=${item.id}`">
							<img class="thumb" :src="item.thumbUrls[item.activeThumb || 0]" />
							<view class="name elip">{{item.name}}</view>
							<view class="price">{{item.price}}元{{item.miniPrice ? '起' : ''}}</view>
							<view class="thumbs">
								<block v-for="(thumb, thumbIndex) in item.thumbUrls" :key="thumbIndex">
									<img :class="['thumb-mini', {'active': item.activeThumb == thumbIndex && item.thumbUrls.length > 1}]" :src="thumb"
									 mode="aspectFit" @mouseenter="thumbSwitch(index, item, thumbIndex)"></image>
								</block>
							</view>
						</navigator>
					</block>
				</view>
				<!-- 分页条 -->
				<view class="pagination-wrap">
					<pagination :pageNumber="pageNumber" :totalSize="200" @change="pageChange"></pagination>
				</view>
			</view>
		</view>

		<!-- 商品推荐 -->
		<recommend title="猜你喜欢"></recommend>

		<!-- 页脚 -->
		<zw-footer></zw-footer>

	</view>
</template>

<script>
	import filterList from '@/components/search/filter-list.vue';
	import pagination from '@/components/common/pagination.vue';
	import recommend from '@/components/goods/recommend.vue';

	import heroConfig from '@/common/config/home/hero.config.js';
	import headerConfig from '@/common/config/common/header.config.js';
	import goodses from '@/common/config/search/goodses.config.js';

	export default {
		components: {
			filterList,
			pagination,
			recommend
		},
		data() {
			return {
				keyword: '',
				categories: [{
					name: '全部'
				}],
				categoryIndex: 0,
				brands: [{
					name: '全部'
				}],
				brandIndex: 0,
				sortMode: ['综合', '新品', '销量', '价格'],
				sortIndex: 0,
				priceUp: true,
				goodses,
				pageNumber: 1
			}
		},
		onLoad(e) {
			if (e.keyword) {
				let k = e.keyword;
				if (k == 'all') k = '全部商品';
				this.keyword = k;
			}

			this.categories.push(...heroConfig.categories);
			this.brands.push(...headerConfig.brands);
		},
		methods: {
			categoryChange(index) {
				this.categoryIndex = index;
			},
			brandChange(index) {
				this.brandIndex = index;
			},
			sortChange(index) {
				if (index == this.sortIndex) {
					if (index == 3) this.priceUp = !this.priceUp;
					return;
				}

				this.sortIndex = index;
				if (!this.priceUp) this.priceUp = true;
			},
			thumbSwitch(index, item, thumbIndex) {
				item.activeThumb = thumbIndex;
				// 触发页面更新
				this.$set(this.goodses, index, item);
			},
			pageChange(e) {
				this.pageNumber = e;

				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				});
			}
		}
	}
</script>

<style lang="scss">
	.search-wrapper {
		background-color: $bg-color-grey;

		.wrap {
			width: 1226px;
			margin: 0 auto;
			padding: 20px 0 100px;
			background-color: $bg-color-grey;

			.sort-wrap {
				margin: 20px 0;
				@extend %flex-align-center;

				.item {
					padding: 0 30px;
					border-left: 1px solid #e0e0e0;
					line-height: 20px;
					@extend %flex-align-center;

					&:first-child {
						border-left: none;
					}

					&.active,
					&:hover {

						.name,
						.icon {
							color: $color-primary;
						}
					}

					.name {
						color: #424242;
						transition: color .2s;
						cursor: pointer;
						font-size: 14px;
					}

					.icon {
						font-size: 20px;
						font-weight: bold;
						color: #424242;
						cursor: pointer;
						transition: transform .3s;

						&.down {
							transform: rotate(180deg);
						}
					}
				}
			}

			.goods-wrap {
				display: flex;
				flex-wrap: wrap;
				width: 1240px;

				.goods {
					width: 296px;
					height: 352px;
					padding-top: 42px;
					margin-right: 14px;
					margin-bottom: 14px;
					background-color: $bg-color;
					transition: box-shadow .5s linear;
					display: flex;
					flex-direction: column;
					align-items: center;

					&:hover {
						box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
					}

					.thumb {
						width: 200px;
						height: 200px;
						cursor: pointer;
						margin-bottom: 16px;
					}

					.name {
						color: $text-color;
						width: 230px;
						margin-bottom: 3px;
						font-size: 14px;
						font-weight: 400;
						cursor: pointer;
						text-align: center;
					}

					.price {
						font-size: 14px;
						margin-bottom: 15px;
						color: $color-primary;
					}

					.thumbs {
						@extend %flex-align-center;

						.thumb-mini {
							width: 34px;
							height: 34px;
							margin: 0 4px;
							border: 1px solid #e0e0e0;
							cursor: pointer;
							transition: border-color .2s linear;

							&.active,
							&:hover {
								border-color: $color-primary;
							}
						}
					}
				}
			}
		}
	}
</style>
